<template>
    <a-tooltip :content="volume ? '取消静音' : '静音'"
               background-color="rgba(0,0,0,0.6)"
               :content-style="{padding:'0.05rem .1rem'}">
        <icon-sound-fill v-if="volume" @click="handleController" />
        <icon-mute-fill  v-else @click="handleController" />
    </a-tooltip>
</template>

<script setup>

    import { useBoolean } from 'vue-hooks-plus'
    const [volume, { setTrue, setFalse }] = useBoolean(false);

    const props = defineProps({
        name: {
            type: String,
            default:()=>'',
            required: true
        },
        options: {
            type: Object,
            default:()=>new Object(),
            required: true
        },
        index: {
            type: Number,
            default:()=>0,
            required: true
        },
    })




    // 截图
    const handleController=()=>{
        const { instance } = props.options
        const videoItem =instance[props.index]
        if(volume.value){
            videoItem.volume(0);
            setFalse()
        }else{
            videoItem.volume(1);
            setTrue()
        }
    }

</script>

<style scoped></style>